import React  from "react";
import './me.scss'
import {Grid} from 'antd-mobile'
import axios from '../../utils/axios.js'
import {Link} from 'react-router-dom'
const DEFAULT_AVATAR = 'http://localhost:8080/img/profile/avatar.png'

// 菜单数据
const menus = [
    { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favorate' },
    { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
    { id: 3, name: '看房记录', iconfont: 'icon-record' ,to: '/'},
    { id: 4, name: '成为房主', iconfont: 'icon-identity',to: '/'},
    { id: 5, name: '个人资料', iconfont: 'icon-myinfo' ,to: '/'},
    { id: 6, name: '联系我们', iconfont: 'icon-cust' ,to: '/'}
  ]
export default class Me extends React.Component{
    constructor(){
        super()
        this.state={
            nickname:"",
            avatar:""
        }
        this.islogin=false
    }

    getUserInfo=async ()=>{
       if(this.islogin) return 
       let res=await axios.get('/user')
       console.log(res,'......')
       if(res.data.status==200){
            this.islogin=true
            this.setState({
                nickname:res.data.body.nickname ,
                avatar:res.data.body.avatar
            })
            
            console.log(this.state)
       }else{
            this.islogin=false
            this.setState({
                nickname:'' ,
                avatar:''
            })
            
       }
       
    }
    inORout=()=>{
        if(this.islogin){
            this.setState({
                nickname:'' ,
                avatar:''
            })
            this.islogin=false
            localStorage.removeItem('token')
        }else{
            this.props.history.push('/login')
        }
    }
    componentDidMount(){
        this.getUserInfo()
    }
    render(){
        let {avatar,nickname}=this.state
       return <div className="me">
           <div className="me-title">
                    <img
                         className='head-img'
                        src={'http://localhost:8080/img/profile/bg.png'}
                        alt="背景图"
                    />
                <div className="user-div">
                    <div className="user-head">
                        <img  
                        src={this.islogin?`http://localhost:8080${avatar}`:DEFAULT_AVATAR } 
                        alt=''></img>
                    </div>
                    <div className="user-info">
                        <div className="user-name">{this.islogin?nickname:'游客'}</div>
                        <div className="to-login" onClick={this.inORout}> {this.islogin?'登出':'登录'}</div>
                    </div>
                </div>
           </div>
           <Grid
              data={menus}
              columnNum={3}
              hasLine={false}
              square={false}
              renderItem={(data)=>{
                  return <div key={data.id} className="grid-item">
                        <i className={`iconfont ${data.iconfont}`}></i>
                        <Link className="grid-text" to={data.to}>{data.name}</Link>
                      </div>
              }}
           >
           </Grid>
           <div className="foot-img">
               <img src="http://localhost:8080/img/profile/join.png" alt="" />
           </div>
       </div>
    }
}